<template>
  <div>
    <el-dialog v-model="show" title="编辑活动" center :show-close="false" width="50%" :close-on-click-modal="false">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动时间" :label-width="formLabelWidth">
        <el-input v-model="form.time" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动地点" :label-width="formLabelWidth">
        <el-input v-model="form.place" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动对象" :label-width="formLabelWidth">
        <el-input v-model="form.people" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动海报" :label-width="formLabelWidth">
        <el-upload
        v-model:file-list="form.image"
        class="upload-demo"
        action=""
        :on-progress="handlePreview"
        :on-remove="handlePreview"
        list-type="picture"
    >
        <el-button type="primary">Click to upload</el-button>
    </el-upload>
     </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog(false)">取消</el-button>
        <el-button type="primary" @click="submit(false)">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import { computed, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Message from '@/components/library/Message'
export default {
  name: 'diaLog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const router = useRouter()
    const store = useStore()
    const formLabelWidth = '240px'
    const form = reactive({
      name: '',
      time: '',
      place: '',
      people: '',
      poster: '',
      image: []
    })
    const show = computed(() => {
      return props.showDialog
    })
    function closeDialog (val) {
      emit('closeDialog', val)
    }
    function submit (val) {
      if (form.image.length === 0) {
        Message({ type: 'warring', text: '请选择图片' })
        return
      }
      emit('closeDialog', val)
      store.commit('lanting/SETFORM', form)
      router.push({ path: '/showResult' })
      // console.log(form)
    }
    function handlePreview (uploadFile) {
      console.log(uploadFile)
    }
    onMounted(() => {
    })
    return { formLabelWidth, form, show, closeDialog, submit, handlePreview }
  }
}
</script>

<style scoped lang='less'>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
